<template>
  <div>
    <el-dialog
      :title="itemvalue.name+'温度电流对比曲线'"
      :visible.sync="dialogVisible"
      width="75%">
      <div class="Temperaturedialog">
        <el-divider></el-divider>
        <div class="suozuo">
          <div>
            <span>
              <el-radio-group v-model="radio3" size="small">
                <el-radio-button label="1">15分钟曲线</el-radio-button>
                <el-radio-button label="2">实时曲线</el-radio-button>
              </el-radio-group>
            </span>
            <span>时间周期</span>
            <span>
              <el-radio-group v-model="radio4" size="small" @change="changeday">
                <el-radio-button label="1">今日</el-radio-button>
                <el-radio-button label="2">昨日</el-radio-button>
              </el-radio-group>
            </span>
            <span>
              <el-date-picker v-model="value1" size="small" type="datetimerange" range-separator="至" start-placeholder="开始日期"
               end-placeholder="结束日期" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </span>
          </div>
          <div><button class="button" @click="submit">查询</button> </div>
        </div>
        <div><i class="iconfont icon-dianchirongliang"></i> A相电流温度监测情况</div>
        <div class="xiangech" ref="axiangech"></div>
        <div><i class="iconfont icon-dianchirongliang"></i> B相电流温度监测情况</div>
        <div class="xiangech" ref="bxiangech"></div>
        <div><i class="iconfont icon-dianchirongliang"></i> C相电流温度监测情况</div>
        <div class="xiangech" ref="cxiangech"></div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="small">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import * as echarts from 'echarts';
import {getwenduquxianlistapi} from '@/api/energy-consumption/factory-energy/UseEnergyReport'
export default {
  name: 'CallPoliceWendudialog',
  props: {
    itemvalue: {
      type:Object
    }
  },
  data() { 
    return {
      radio3: '1',
      radio4: '1',
      dialogVisible: false,
      value1:[]
    };
  },

  mounted() {
    this.gettime()
  },

  methods: {
    submit() {
      this.getaxiang()
      this.getbxiang()
      this.getcxiang()
    },
    async getaxiang() {
      var chartDom = this.$refs.axiangech
      var myChart = echarts.init(chartDom);
      var option;
      const loading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target: chartDom
      });
      const { data: { list } } = await getwenduquxianlistapi({
        chartType: '1', classId: this.itemvalue.classId, dateType: this.radio3,
        startTime:this.value1[0],endTime:this.value1[1]
      })
      const timePoints = []
      for (let i = 0; i < list.length; i++) { 
        if (list[i].datalist.length) {
          for (let j = 0; j < list[i].datalist.length; j++){
            timePoints.push(list[i].datalist[j].timeReading)
          }
          break
        }
      }
      const series = list.map(ele => {
        return {
          name: ele.name,
          data: ele.datalist.map(ele => ele.valueReading),
          type: 'line',
          smooth: true,
          symbolSize: 5,
        }
      })
      option = {
        backgroundColor: '#fff',
      color:['#f4c65b','#68bbc4','#58a55c'],
      tooltip: {
        trigger: 'axis',
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: 60,
        containLabel: true
      },
      legend: {
      },
      xAxis: {
        type: 'category',
        data: timePoints,
      },
      yAxis: {
        type: 'value',
        name:'',
      },

      series: series
    };
      myChart.clear();
      option && myChart.setOption(option);
      loading.close()
    },
    async getcxiang() {
      var chartDom = this.$refs.cxiangech
      var myChart = echarts.init(chartDom);
      var option;
      const loading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target: chartDom
      });
      const { data: { list } } = await getwenduquxianlistapi({
        chartType: '3', classId: this.itemvalue.classId, dateType: this.radio3,
        startTime:this.value1[0],endTime:this.value1[1]
      })
      const timePoints = []
      for (let i = 0; i < list.length; i++) { 
        if (list[i].datalist.length) {
          for (let j = 0; j < list[i].datalist.length; j++){
            timePoints.push(list[i].datalist[j].timeReading)
          }
          break
        }
      }
      const series = list.map(ele => {
        return {
          name: ele.name,
          data: ele.datalist.map(ele => ele.valueReading),
          type: 'line',
          smooth: true,
          symbolSize: 5,
        }
      })
      option = {
        color:['#e42121','#68bbc4','#58a55c'],
      backgroundColor: '#fff',
      tooltip: {
        trigger: 'axis',
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: 60,
        containLabel: true
      },
      legend: {
      },
      xAxis: {
        type: 'category',
        data: timePoints,
      },
      yAxis: {
        type: 'value',
        name:'',
        nameTextStyle: {
          padding:[0,0,0,70]
        },
      },

      series: series
    };
      myChart.clear();
      option && myChart.setOption(option);
      loading.close()
    },
    async getbxiang() {
      var chartDom = this.$refs.bxiangech
      var myChart = echarts.init(chartDom);
      var option;
      const loading = this.$loading({
        lock: true,
        text: 'loading',
        spinner: 'el-icon-loading',
        target: chartDom
      });
      const { data: { list } } = await getwenduquxianlistapi({
        chartType: '2', classId: this.itemvalue.classId, dateType: this.radio3,
        startTime:this.value1[0],endTime:this.value1[1]
      })
      const timePoints = []
      for (let i = 0; i < list.length; i++) { 
        if (list[i].datalist.length) {
          for (let j = 0; j < list[i].datalist.length; j++){
            timePoints.push(list[i].datalist[j].timeReading)
          }
          break
        }
      }
      const series = list.map(ele => {
        return {
          name: ele.name,
          data: ele.datalist.map(ele => ele.valueReading),
          type: 'line',
          smooth: true,
          symbolSize: 5,
        }
      })
      option = {
        backgroundColor: '#fff',
        color:['#92be52','#68bbc4','#58a55c'],
      tooltip: {
        trigger: 'axis',
      },
      grid: {
        left: '3%',
        right: '4%',
        bottom: '3%',
        top: 60,
        containLabel: true
      },
      legend: {
      },
      xAxis: {
        type: 'category',
        data: timePoints
      },
      yAxis: {
        type: 'value',
        name:'',
        nameTextStyle: {
          padding:[0,0,0,70]
        },
      },

      series: series
    };
      myChart.clear();
      option && myChart.setOption(option);
      loading.close()
    },
    // 切换时间
    changeday(val) {
      console.log(val);
      if (val == '1') {
        this.gettime() 
      } else if(val=='2'){
        this.getyesttime()
      }
    },
    // 获取当前时间戳
    gettime() {
      this.value1=[]
      const date = new Date()
      const year = date.getFullYear() // 年
      const mon = date.getMonth() + 1 // 月
      const month=mon<10?'0'+mon:mon
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate() //日
      this.value1.push(year+'-'+month+'-'+day+' '+'00'+':'+'00'+':'+'00')
      this.value1.push(year+'-'+month+'-'+day+' '+'23'+':'+'45'+':'+'00')
    },
    // 获取昨日时间戳
    getyesttime() {
      this.value1 = []
      var yesterday = new Date();
      yesterday.setDate(yesterday.getDate() - 1);
      var yesterdayYear = yesterday.getFullYear();
      var month = yesterday.getMonth() + 1; // 月份从0开始，所以需要加1
      const yesterdayMonth = month < 10 ? '0' + month : month
      var yesterdayDay = yesterday.getDate();
      console.log(yesterdayYear+'-'+yesterdayMonth+'-'+yesterdayDay);
      this.value1.push(yesterdayYear+'-'+yesterdayMonth+'-'+yesterdayDay+' '+'00'+':'+'00'+':'+'00')
      this.value1.push(yesterdayYear+'-'+yesterdayMonth+'-'+yesterdayDay+' '+'23'+':'+'45'+':'+'00')
    },
  },
};
</script>

<style scoped>
.Temperaturedialog{
  .suozuo{
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    span{
      margin-right: 10px;
    }
    .button{
      width: 60px;
      height: 30px;
      background-color: #1890ff;
      border-radius: 3px;
      color:#fff;
      border: none;
    }
  }
  .iconfont{
    color: #1890ff;
  }
  .xiangech{
    height: 300px;
    margin:0 0 20px 0;
  }
}
::v-deep .el-dialog__footer{
  text-align: center;
}
</style>